<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>随机抽图 | 背景版</title>
  <meta property="og:title" content="随机抽图" />
  <meta property="og:image" content="https://picsum.photos/800/800?random=0" />
  <style>
    /* === 全屏背景图 + 暗色蒙层 === */
    html,body{height:100%;margin:0}
    body{
      font-family:system-ui;
      display:flex;
      align-items:center;
      justify-content:center;
      background:url("https://picsum.photos/1920/1080?random=bg") center/cover fixed no-repeat;
      position:relative;
      color:#fff;
    }
    body::before{          /* 半透明蒙层，让字更清晰 */
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.45);
      z-index:0;
    }

    /* === 卡片 === */
    #card{
      position:relative;   /* 蒙层之上 */
      z-index:1;
      width:90%;
      max-width:420px;
      background:rgba(34,34,34,.75);
      backdrop-filter:blur(8px);
      border-radius:16px;
      padding:24px;
      text-align:center;
      box-shadow:0 8px 32px rgba(0,0,0,.6);
    }
    #card img{width:100%;border-radius:12px;margin:16px 0}
    #tag-box{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
    .tag{background:#3b82f6;color:#fff;padding:4px 10px;border-radius:999px;font-size:14px}
    button{width:100%;padding:14px;font-size:18px;border:none;border-radius:12px;background:#3b82f6;color:#fff;cursor:pointer;transition:.25s}
    button:hover{filter:brightness(1.1)}
  </style>
</head>
<body>
<div id="card">
  <h1>随机抽图 🎲</h1>
  <p id="tip">点击下方按钮抽一张</p>
  <img id="pic" style="display:none" alt="随机图" />
  <div id="tag-box"></div>
  <button id="btn" onclick="draw()">开始抽取</button>
  <button id="reset" onclick="reset()" style="display:none">再来一次</button>
</div>

<script>
  const items = [
    {url:'https://gitee.com/clear-natural-forest/lucky-image/raw/master/img/photo_1.jpg'},
    {url:'https://gitee.com/clear-natural-forest/lucky-image/raw/master/img/photo_2.jpg'},
    {url:'https://gitee.com/clear-natural-forest/lucky-image/raw/master/img/photo_3.jpg'},
    {url:'https://gitee.com/clear-natural-forest/lucky-image/raw/master/img/photo_4.jpg'},
    {url:'https://gitee.com/clear-natural-forest/lucky-image/raw/master/img/photo_5.jpg'},
  ];

  const btn = document.getElementById('btn');
  const resetBtn = document.getElementById('reset');
  const pic = document.getElementById('pic');
  const tip = document.getElementById('tip');
  const tagBox = document.getElementById('tag-box');

  function draw(){
    const item = items[Math.floor(Math.random()*items.length)];
    pic.src = item.url;
    pic.style.display = 'block';
    tagBox.innerHTML = item.tags.map(t=>`<span class="tag">${t}</span>`).join('');
    btn.style.display = 'none';
    resetBtn.style.display = 'block';
    tip.textContent = '再抽一张？';
  }
  function reset(){
    pic.style.display = 'none';
    tagBox.innerHTML = '';
    btn.style.display = 'block';
    resetBtn.style.display = 'none';
    tip.textContent = '点击下方按钮抽一张';
  }
</script>
</body>
</html>
